<th:block th:with="mainMenu=${@columnTag.treeCmsColumnById(webConfig['oly.web.theme.nice.column.main'])}">
  <th:block th:if="${mainMenu!=null && !#lists.isEmpty(mainMenu.childList)}">
    <li
      class="group py-4 max-lg:py-0"
      th:each="column:${mainMenu.childList}"
    >
      <div th:if="${!#lists.isEmpty(column.childList)}" class="menu-dropdown" th:data-toggle="${'mega-menu-full-dropdown-'+column.columnId}">
        <button
          class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded lg:w-auto hover:bg-gray-100 lg:hover:bg-transparent lg:border-0 lg:hover:text-blue-600 lg:p-0 dark:text-white lg:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 lg:dark:hover:bg-transparent dark:border-gray-700"
          ><span th:text="${column.columnName}">下拉</span>
          <svg
            class="w-2.5 h-2.5 ms-2.5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 10 6"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="m1 1 4 4 4-4"></path>
          </svg></button
        >
        <div
          th:id="'mega-menu-full-dropdown-' + ${column.columnId}"
          class="menu-dropdown-box lg:group-hover:block mt-4 pb-4 max-lg:mt-0 absolute left-0 w-screen rounded-lg bg-white dark:bg-gray-800 max-lg:min-h-screen max-lg:fixed max-lg:top-16 shadow-sm hidden"
        >
          <div
            class="grid  mx-auto rounded-lg dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white max-lg:mx-4"
          >
            <button
              class="lg:hidden pt-2 px-2 col-start-1 col-end-7 text-left"
              th:id="'mega-menu-full-dropdown-' + ${column.columnId}+'-close'"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                class="w-6 h-6"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M6.75 15.75 3 12m0 0 3.75-3.75M3 12h18"></path>
              </svg>
            </button>
            <div
              class="col-start-1 col-end-7 flex flex-wrap justify-center w-full"
              th:aria-labelledby="${'mega-menu-full-dropdown-'+column.columnId}"
            >
              <div
                class="cursor-pointer h-36 group w-64 m-2 overflow-hidden rounded-lg"
                th:each="twoColumn : ${column.childList}"
                th:with="imgs=${@commonTag.split(twoColumn.columnIcon==null?'':twoColumn.columnIcon)},rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},iul=@{/nice/static/images/thumbs/}"
              >
                <img
                  class="h-36 w-64"
                  th:alt="${twoColumn.columnName}"
                  th:src="${(imgs==null)?iul+rando+'.jpg':(imgPrefix+imgs[0])}"
                />
                <div class="relative bottom-36 h-36 w-64">
                  <div class="flex justify-center pt-12">
                    <a
                      th:href="${#strings.isEmpty(twoColumn.columnUrl)?'javascript:void(0);': webConfig['oly.web.domain']+twoColumn.columnUrl}"
                      class="inline-flex p-0.5 overflow-hidden text-sm font-medium text-gray-900 rounded-lg hover:text-white dark:text-white"
                    >
                      <span
                        class="px-5 py-2.5 transition-all ease-in duration-75 bg-white/60 dark:bg-gray-900/60 rounded-md"
                        th:text="${twoColumn.columnName}"
                      >
                        Green to blue
                      </span>
                    </a>
                  </div>
                  <p
                    class="p-2 text-wrap text-gray-500 dark:text-gray-400"
                    th:text="${twoColumn.remark}"
                  >
                    备注
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <a
        th:if="${#lists.isEmpty(column.childList)}"
        th:href="${#strings.isEmpty(column.columnUrl)?'javascript:void(0);': webConfig['oly.web.domain']+column.columnUrl}"
        class="py-2 px-3 text-gray-900 rounded hover:bg-gray-100 lg:hover:bg-transparent lg:p-0 dark:text-white dark:hover:bg-gray-700 lg:dark:hover:bg-transparent dark:border-gray-700"
        aria-current="page"
        th:text="${column.columnName}"></a>
    </li>
  </th:block>
</th:block>


